{% extends 'sales/base.html' %}
{% load static %}
{% load paginate %}
{% load thumbnail %}
{% block extralinks %}
<style>
  .form-group label {
    font-weight: 800;
  }
</style>
{% endblock %}
{% block content %}

<div class="main_container">
  
  <div class="row marl">
    <div class="col-lg-12 text-right">
      <span class="d-inline"><a class="primary_btn" href="{% url 'events:event_create'%}"><i class="fa fa-plus"></i>
          Add New
          Event</a></span>
    </div>
  </div>
  
  <div class="filter_row list_filter_row row marl">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <form id="leads_filter" action="" method="POST">
            <div class="card-body ">
              <div class="card-title">Filters</div>
              <div class="row marl">
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Name</label>
                    <input type="text" class="form-control" placeholder="Event Name" name="event_name"
                      value="{{request.POST.event_name}}">
                  </div>
                </div>
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Created By</label>
                    <select name="created_by" id="created_by" class="assigned_users_ form-control">
                      <option value="">
                        ------------------</option>
                      {% for user in created_by_users %}
                      <option value="{{user.id}}" {% if user.id|slugify == request.POST.created_by %} selected=""
                        {% endif %}>
                        {{user.email}}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Assigned Users</label>
                    <select class="assigned_users form-control" name="assigned_to" multiple="multiple">
                      {% for user in users %}
                      <option value="{{user.id}}" {% if user.id|slugify in assigned_to %} selected="" {% endif %}>
                        {% if user.username %}{{user.username}}{% else %}{{user.email}}{% endif %}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1" class="required">Date of Meeting</label>
                    <input type="text" id="date_of_meeting" name="date_of_meeting" class="form-control"
                      value="{{request.POST.date_of_meeting}}">
                  </div>
                </div>
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    
                  </div>
                </div>
                <input type="hidden" name="tab_status" id="tab_status">
                <div class="filter_col col-2">
                  <div class="form-group buttons_row">
                    <button class="btn btn-primary save" type="submit">Search</button>
                    <a href="{% url 'events:events_list' %}" class="btn btn-default clear">Clear</a>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-12 col-lg-12 col-xl-12">
    <div class="table_container_row row marl no-gutters">
      <div class="col-md-12">
        
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="open" role="tabpanel" aria-labelledby="open">
            <div class="card">
              <div class="card-body">
                <div class="card-title text-right">
                  <span class="float-left">Events - {% if show_pageitems %}
                    {% show_pageitems %}{% else %}
                    {{ events|length }}{% endif %}</span>
                  <span class="filter_toggle">
                    <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
                  </span>
                </div>
                <div class="table-responsive">
                  <table class="table ">
                    <thead>
                      {% if events|length > 0 %}
                      <tr>
                        <th width="5%">ID</th>
                        <th width="5%">Name</th>
                        <th width="5%">Contacts</th>
                        <th width="10%">Assigned To</th>
                        <th width="10%">Start Date</th>
                        <th width="10%">Date of Meeting</th>
                        <th width="10%">End Date</th>
                        <th width="5%">Created On</th>
                        <th width="5%">Created by</th>
                        <th width="10%">Actions</th>
                      </tr>
                      {% endif %}
                    </thead>
                    <tbody>
                      {% if per_page %}
                      {% paginate per_page events %}
                      {% else %}
                      {% paginate 10 events %}
                      {% endif %}
                      {% for event in events %}
                      <tr class="text-center">
                        <td scope="row">{{ forloop.counter }}</td>
                        <td><a href="#" data-toggle="modal" data-target="#exampleModalCenter_event{{event.id}}">
                            {{ event.name }} </a></td>
                        <td>
                          {% with contacts=event.contacts.all  %}
                          {% if contacts %}
                          {% for contact in contacts %}
                          <div>
                            <a href="{% url 'contacts:view_contact' contact.id %}">{{contact}}</a>
                          </div>
                          {% empty %}
                          None
                          {% endfor %}
                          {% else %}
                          <div>
                            None
                          </div>
                          {% endif %}
                          {% endwith %}
                        </td>
                        <td>
                          {% with users=event.get_team_and_assigned_users %}
                          {% for user in users %}
                          {% if user.profile_pic %}
                          {% thumbnail user.profile_pic "40x40" crop="center" as im %}
                          <a href="{% url 'common:view_user' user.id %}">
                            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
                              title="{{ user.email }}">
                          </a>
                          {% endthumbnail %}
                          {% else %}
                          <a href="{% url 'common:view_user' user.id %}">
                            <img src="{% static 'images/user.png' %}" title="{{ user.email }}" width="40" height="40">
                          </a>
                          {% endif %}
                          {% empty %}
                          None
                          {% endfor %}
                          {% endwith %}
                        </td>
                        <td>{{ event.start_date }} </td>
                        <td>{{ event.date_of_meeting }} </td>
                        <td>{{ event.end_date }} </td>
                        <td title="{{ event.created_on }}">{{ event.created_on_arrow }}</td>
                        <td>
                          {% if event.created_by %}
                          {% if event.created_by.profile_pic %}
                          {% thumbnail event.created_by.profile_pic "40x40" crop="center" as im %}
                          <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
                            title="{{ event.created_by }}" style="border-radius: 50%" />
                          {% endthumbnail %}
                          {% else %}
                          <img src="{% static 'images/user.png' %}" alt="Micro profile pic"
                            style="width: 40px;height: 40px;border-radius: 50%;" title="{{ event.created_by }}" />
                          {% endif %}
                          {% else %}
                          None
                          {% endif %}
                        </td>
                        <td class="actions">
                          {% if request.user == event.created_by or request.user.role == 'ADMIN' or request.user.has_sales_access %}
                          <a href="{% url 'events:detail_view' event.id %}" class="btn btn-info edit" title="View"><i
                              class="fas fa-eye"></i></a>
                          <a href="{% url 'events:event_update' event.id %}" class="btn btn-success edit" title="Edit"><i
                              class="fas fa-pencil-alt"></i></a>
                          <a href="{% url 'events:event_delete' event.id %}"
                            class="btn btn-danger delete remove_document" title="Delete"><i class="fas fa-trash-alt"></i></a>
                          {% endif %}
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
                {% ifequal events|length 0 %}
                <h6 class="text-center">No Events Found</h6>
                {% endifequal %}
                <div class="marl row text-center">
                  {% show_pages %}
                </div>
              </div>
            </div>
          </div>
          
          
          
        </div>
      </div>
    </div>
  </div>
</div>


{% for event in events %}

<div class="modal fade" id="exampleModalCenter_event{{event.id}}" tabindex="-1" role="dialog"
  aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">{{ event.name }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        
        <div class="" id="">
          <div class="">
            <div class="col-md-12" id="">
              <div class="card">
                <div class="card-body" id="datashow" style="margin: 0; padding: 0;">
                  <div class="card-title text-right">
                    <h5>
                      
                      <span style="margin-top: 0px">
                        
                      </span>
                    </h5>
                  </div>
                  <div class="row marl">
                    <div class="col-md-4">
                      {% if event.name %}
                      <div class="filter_col col-md-12" id="iname">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_name" data-name="name">Name</label>
                          <div class="account_field" id="account_name" data-name="name">{{ event.name }}</div>
                        </div>
                      </div>
                      {% endif %}
                      {% if event.event_type %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_phone" data-name="name">Event Type</label>
                          <div class="account_field" id="account_phone" data-name="name">{{ event.event_type }}</div>
                        </div>
                      </div>
                      {% endif %}
                      {% if event.start_date %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_status" data-name="name">Start Date</label>
                          <div class="account_field" id="account_status" data-name="name">{{ event.start_date }}</div>
                        </div>
                      </div>
                      {% endif %}
                      {% if event.end_date %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_status" data-name="name">End Date</label>
                          <div class="account_field" id="account_status" data-name="name">{{ event.end_date }}</div>
                        </div>
                      </div>
                      {% endif %}
                    </div>
                    <div class="col-md-4">
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          {% with contacts=event.contacts.all  %}
                          <label class="acc_field_label" for="id_website" data-name="name">Contacts</label>
                          {% if contacts %}
                          {% for contact in contacts %}
                          <div class="account_field" id="account_website" data-name="name">{{ contact }}</div>
                          {% endfor %}
                          {% else %}
                          <div class="account_field" id="account_website" data-name="name">None</div>
                          {% endif %}
                          {% endwith %}
                        </div>
                      </div>

                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          {% with users=event.get_team_and_assigned_users  %}
                          <label class="acc_field_label" for="id_website" data-name="name">Assigned To</label>
                          {% if users %}
                          {% for user in users %}
                          <div class="account_field" id="account_website" data-name="name">
                            <a href="{% url 'common:view_user' user.id %}">
                              {{ user }}
                            </a>
                          </div>
                          {% endfor %}
                          {% else %}
                          <div class="account_field" id="account_website" data-name="name">None</div>
                          {% endif %}
                          {% endwith %}
                        </div>
                      </div>
                      {% if event.start_time %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_website" data-name="name">Start Time</label>
                          <div class="account_field" id="account_website" data-name="name">{{event.start_time}}</div>
                        </div>
                      </div>
                      {% endif %}
                      {% if event.end_time %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_website" data-name="name">End Time</label>
                          <div class="account_field" id="account_website" data-name="name">{{event.end_time}}</div>
                        </div>
                      </div>
                      {% endif %}
                    </div>
                    <div class="col-md-4">
                      {% if event.date_of_meeting %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_website" data-name="name">Date Of Meeting</label>
                          <div class="account_field" id="account_website" data-name="name">{{ event.date_of_meeting }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  {% if event.description %}
                  <div class="filter_col col-md-12">
                    <div class="form-group">
                      <label class="acc_field_label" for="id_website" data-name="name">Description</label>
                      <div class="account_field" id="account_website" data-name="name">{{ event.description }}</div>
                    </div>
                  </div>
                  {% endif %}
                  <div class="created_information">
                    Created by <b>{{ event.created_by }}</b> created on
                    <b title="{{ event.created_on }}">{{ event.created_on_arrow }}</b>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>





{% endfor %}

{% endblock %}
{% block js_block %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('.assigned_users').select2();
    $('#id_tag').select2();
    $('#created_by').select2();
    $(".filter_toggle").click(function () {
      $(".list_filter_row").toggle();
    });
    var date = new Date();
    var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
    $('#date_of_meeting').datetimepicker({
      'format': 'YYYY-MM-DD',
      minDate: today
    })
  });

  search = "{{search}}"

  if (search == 'True') {
    $(".list_filter_row").show();
  }

  $("#close-tab").click(function (e) {
    $("#tab_status").val('Closed')
  })

  $("#open-tab").click(function (e) {
    $("#tab_status").val('Open')
  })

  tab_status = "{{tab_status}}"
  if (tab_status == 'Closed') {
    $("#close-tab").click()
  } else {
    $("#open-tab").click()
  }

  $('.delete').click(function (e) {
    e.preventDefault()
    url = $(this).attr('href')
    if (!confirm('Are you sure you want to delete?'))
      return;
    window.location = $(this).attr('href')
  });

  $("a[rel='page']").click(function (e) {
    e.preventDefault();
    $('#leads_filter').attr("action", $(this).attr("href"));
    $('#leads_filter').submit();
  });
</script>
{% endblock js_block %}
